import React, { useEffect, useState } from "react";
import { Spin, Block } from "@ct0/ui";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  card: {
    margin: "10px",
    padding: "20px",
    border: "1px solid #e0e0e0",
  },
});

export default function SpinPanel() {
  const [loading, setLoading] = useState(true);

  const classes = useStyles();

  useEffect(() => {
    setTimeout(() => setLoading(false), 5000);
  }, []);

  return (
    <div>
      <h2>Spin 加载中</h2>
      <ul>
        <li>用于页面和区块的加载中状态</li>
        <li>加载图标的位置在内容区域的中心</li>
      </ul>

      <h2>代码演示</h2>
      <Block horizontal>
        <Block>
          <div className={classes.card}>
            <Spin spinning={true}>
              <div>加载中</div>
            </Spin>
          </div>
        </Block>
        <Block>
          <div className={classes.card}>
            <Spin spinning={loading}>
              <div>{loading ? "加载中" : "加载完成"}</div>
            </Spin>
          </div>
        </Block>
      </Block>

      <h2>调用方式</h2>
      <div className="code" style={{ marginTop: "10px" }}>
        <pre>
          <code className="language-jsx">
            {`import { Spin } from '@ct0/ui'`}
            {"\n"}
            ReactDOM.render(
            {`<Spin spinning={true}`}, mountNode );
          </code>
        </pre>
      </div>

      <h2>API</h2>
      <table border="1" cellPadding={5}>
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>spinning</td>
            <td>是否为加载中状态</td>
            <td> boolean</td>
            <td>true</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
